<template>
  <div class="departments-container">
    <div class="app-container">
      <el-card class="box-card">
        <el-tabs v-model="activeName">
          <el-tab-pane label="组织结构" name="first" class="tab-pane" />
          <el-row type="flex" justify="space-between" align="middle" class="department-header">
            <el-col :span="20"><div class="grid-content bg-purple" />
              <i class="el-icon-s-home" />
              <span class="company">江苏传智播客教育科技股份有限公司</span>
            </el-col>
            <el-col :span="4"><div class="grid-content bg-purple-light" />
              <el-row type="flex" justify="end">
                <el-col>负责人</el-col>
                <el-col>
                  <el-dropdown>
                    <span class="el-dropdown-link">
                      操作<i class="el-icon-arrow-down el-icon--right" />
                    </span>
                    <el-dropdown-menu slot="dropdown">
                      <el-dropdown-item @click.native="addfn('')">添加子部门</el-dropdown-item>
                    </el-dropdown-menu>
                  </el-dropdown>
                </el-col>
              </el-row>
            </el-col>
          </el-row>
          <!-- 树形组件 -->
          <el-tree class="departments-tree" :data="treeData" :props="defaultProps" :default-expand-all="true">
            <template slot-scope="{ data }">
              <el-row type="flex" justify="space-between" style="height: 50px; width: 100%;" align="middle">
                <el-col :span="20">
                  <span>{{ data.name }}</span>
                </el-col>
                <el-col :span="4">
                  <el-row type="flex" justify="end">
                    <el-col>{{ data.manager }}</el-col>
                    <el-col>
                      <el-dropdown>
                        <span class="el-dropdown-link">
                          操作<i class="el-icon-arrow-down el-icon--right" />
                        </span>
                        <el-dropdown-menu slot="dropdown">
                          <el-dropdown-item @click.native="addfn(data.id)">添加子部门</el-dropdown-item>
                          <el-dropdown-item @click.native="editfn(data.id)">编辑部门</el-dropdown-item>
                          <el-dropdown-item v-if="data&&!data.children" @click.native="delfn(data.id)">删除部门</el-dropdown-item>
                        </el-dropdown-menu>
                      </el-dropdown>
                    </el-col>
                  </el-row>
                </el-col>
              </el-row>
            </template>
          </el-tree>
        </el-tabs>
        <!-- 弹窗 -->
        <el-dialog
          :title="isEidt?'编辑部门':'添加部门'"
          :visible.sync="dialogVisible"
          width="50%"
          :close-on-press-escape="false"
          :close-on-click-modal="false"
        >
          <!-- form组件 -->
          <deptDialog
            v-if="dialogVisible"
            ref="refDeptDialog"
            :parent-id="parentId"
            :iseidt="isEidt"
            :originlist="originlist"
            @updialogVisible="updialogVisible"
            @close="close"
          />
        </el-dialog>
      </el-card>

    </div>
  </div>
</template>

<script>
import { getDepartments, delDepartments } from '@/api/departments'
import { datatotree } from '@/utils/index'
import deptDialog from './deptDialog.vue'
export default {
  components: { deptDialog },
  data() {
    return {
      activeName: 'first', // tab默认选择展示第一个
      treeData: [], // 树形组件的数据结构
      defaultProps: {
        children: 'children',
        label: 'name'
      },
      dialogVisible: false, // 控制弹窗显示隐藏
      parentId: '', // 当前点击父级的id
      isEidt: false, // 是不是编辑子部门 false是添加
      originlist: []// 没转化成树形组件的扁平数据
    }
  },
  created() {
    this.getDepartments()
  },
  methods: {
    // 获取组织架构
    async getDepartments() {
      const res = await getDepartments()
      //   console.log(res.data.depts)得到的扁平化的数据 需要封装一个方法,让扁平化数据变成树形结构
      this.treeData = datatotree(res.data.depts, '')
      this.originlist = res.data.depts.map((obj) => ({ id: obj.id, pid: obj.pid, name: obj.name, code: obj.code }))
    //   console.log(res.data.depts)
    },
    // 点击添加子部门按钮 出现弹窗
    addfn(fid) {
      this.dialogVisible = true
      this.parentId = fid
      this.isEidt = false
    },
    // 点击编辑部门按钮
    editfn(fid) {
      this.dialogVisible = true
      this.isEidt = true
      this.parentId = fid
    },
    // 点击确定按钮后进行修改或新增子部门
    updialogVisible() {
      this.dialogVisible = false// 控制弹窗关闭
      this.getDepartments()// 用来获取新的组织架构
    },
    // 点击删除按钮删除部门
    async delfn(fid) {
      // 出现弹窗 确认删除

      // 掉删除接口,删除数据
      // 重新调去组织架构
      const res = await this.$confirm('此操作将永久删除该部门, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).catch((err) => err)
      if (res === 'confirm') { // 确定删除
        const res1 = await delDepartments(fid)
        console.log(res1)
        if (!res1.success) return this.$message.error(res1.message)// 删除失败
        this.getDepartments()// 删除成功重新渲染
        this.$message.success(res1.message)
      }
    },
    // 点击取消,关闭弹窗
    close() {
      this.dialogVisible = false
      // 点击取消,清空表单验证
      this.$refs.refDeptDialog.resetForm()
    }
  }
}
</script>

<style lang="scss" scoped>
.box-card {
  padding: 10px 30px;
}

.tab-pane {
  padding: 20px 80px;

  .company {
    margin-left: 12px;
    font-weight: bold;
    font-size: 14px;
  }

  .department-header {
    height: 50px;
    display: flex;
    align-items: center;
    border-bottom: 1px solid #ccc;
  }
}
  .departments-tree {
  margin: 12px 0px;
}
</style>
